import React, { Component } from 'react';
import { connect } from 'dva';
import {
  Input,
  Button,
  Form,
  Select,
  DatePicker,
  InputNumber,
  Radio,
  Upload,
  Icon,
  message,
} from 'antd';
import moment from 'moment';
import Drawer from 'react-motion-drawer';
import * as api from "../../../services/api";
import './less/contract.less';
import PSelect from "../../../components/Pro/PSelect";

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
const dateFormat = 'YYYY-MM-DD';
const { RangePicker } = DatePicker;

@connect(state => ({ profile: state.profile }))
@Form.create()


export default class RenewContractDrawer extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      open: this.props.visiable,//编辑查看
      editable: this.props.editable,//抽屉的输入框是否可编辑
      wenUrl: '',//查看状态下的预览文件地址
      wenUrlMore: '',//第一次进来的预览文件地址
      comContractId: 0,
      contractType: "01",
      distributionModeList: [],//发放/结算方式
      currentRow: {
        contractType: '',//合同类型
        contractName: '',//合同名称
        comFileNo: '',//企业档案编号
        comParty: '',//企业所在方
        firstPartyName: '',//甲方名称
        firstPartyTel: '',//甲方联系电话
        secondPartyName: '',//乙方名称
        secondPartyTel: '',//乙方联系电话
        effectStartDate: '',//生效开始日期
        effectEndDate: '',//生效终止日期
        payAmount: '',//付费金额
        payDate: '',//付费日期
        secondPartyIdCardNo: '',//乙方身份证号码
        workPost: '',//工作岗位
        content: '',//工作/劳务内容
        postSalary: '',//岗位薪资
        periodSalary: '',//试用期工资
        period: 0,//试用期
        distributionMode: '',//发放/结算方式
        workPlace: '',//工作/劳务地点'
        serviceAmount: '',//劳务费用
        serviceTotalAmount: '',//劳务总金额
        agreementSignDate: null,//协议签订日期
        contractUrl: '',//合同文件url
        remark: '',//备注
        timeLimit: '',//合同期限
      },
      fileListWed: [
        {
          uid: 1,
          name: '123',
          status: 'done',
          url: 'http://www.baidu.com/yyy.png',
        }
      ],
      timeLimit: '',
    };
    //文件上传
    const that = this;
    that.modelUpload = {
      name: 'xfile',
      action: api.uploadUrl,
      headers: {
        authorization: 'authorization-text',
      },
      // beforeUpload() {
      //   const number = that.state.fileNumber === 0;
      //   if (!number) {
      //     message.success('上传成功!');
      //   }
      //   return number;
      // },
      onChange: (info) => {
        const { setFieldsValue } = that.props.form;
        console.log(info, 'infoinfo');
        let fileList = info.fileList;
        console.log(fileList, 'filistOne');
        fileList = fileList.slice(-1);
        this.setState({ fileListWed: fileList });
        console.log(fileList, 'filist');
        console.log(info.file.status, 'info.file.status');
        if (info.file.status === 'removed') {
          that.setState({
            fileNumber: 0
          });
        }
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList, 'uploading');
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} 文件上传成功`);
          console.log('fileListfileListfileList', fileList[0].response.data);
          that.setState({ contractUrl: fileList[0].response.data });
          setFieldsValue({ contractUrl: fileList[0].response.data });
          that.setState({
            fileNumber: 1
          });
          this.renderCheckOthers(fileList[0].response.data);
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} 文件上传失败.`);
        }
      },
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ open: nextProps.visiable });
    this.setState({ editable: nextProps.editable });
    this.setState({ contractType: nextProps.typesd });

    if (nextProps.comContractId !== this.state.comContractId) {
      if (nextProps.comContractId === 0 || nextProps.comContractId === undefined) {
        return;
      }
      this.setState({
        comContractId: nextProps.comContractId,
      });
      this.renderDate(nextProps.comContractId);
    }
  }

  renderDate = (pro) => {
    api.enterpriseComContractGetComContractById({ comContractId: pro }).then((data) => {
      console.log('shuju', data.data);
      console.log('shuju', data.data.period);

      this.setState({
        currentRow: {
          contractType: data.data.contractType || '',
          contractName: data.data.contractName || '',
          comFileNo: data.data.comFileNo || '',
          comParty: data.data.comParty || '',
          firstPartyName: data.data.firstPartyName || '',
          firstPartyTel: data.data.firstPartyTel || '',
          secondPartyName: data.data.secondPartyName || '',
          secondPartyTel: data.data.secondPartyTel || '',
          effectStartDate: data.data.effectStartDate || '',
          effectEndDate: data.data.effectEndDate || '',
          payAmount: data.data.payAmount || '',
          payDate: data.data.payDate || '',
          secondPartyIdCardNo: data.data.secondPartyIdCardNo || '',
          workPost: data.data.workPost || '',
          content: data.data.content || '',
          postSalary: data.data.postSalary || '',
          periodSalary: data.data.periodSalary || '',
          period: data.data.period || '',
          distributionMode: data.data.distributionMode || '',
          workPlace: data.data.workPlace || '',
          serviceAmount: data.data.serviceAmount || '',
          serviceTotalAmount: data.data.serviceTotalAmount || '',
          // agreementSignDate: data.data.agreementSignDate || '',
          contractUrl: data.data.contractUrl || '',
          remark: data.data.remark || '',
          agreementSignDate: data.data.agreementSignDate || null,
          payDateSd: data.data.payDate || '',
          effectDate: data.data.effectStartDate || '',
          timeLimit: data.data.timeLimit || '',
        },
        contractType: data.data.contractType || '',
      }, () => {
        this.renderCheckOthers(this.state.currentRow.contractUrl);
        this.renderCheckOthersMore(this.state.currentRow.contractUrl);
      });
    }, (err) => {
      console.log(err);
    });
  };

  //生命周期
  componentDidMount = () => {
    this.setState({
      fileListWed: [{
        uid: 1,
        name: '文件',
        status: 'done',
        url: this.props.fileUrl,
      }]
    });
    this.DistributionModeList();
  };
  DistributionModeList = () => {
    api.getDictInformation({ codeTypes: 'distributionMode' }).then((data) => {
      console.log('发放/结算方式data123456:', data);
      //判断获取数据是否为空
      if (data.data) {
        this.setState({
          distributionModeList: data.data.distributionMode,
        });
      }
    });
  };


  handleEditContractSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('修改合同', values);
        // console.log(values.effectDate[1])
        if (values.agreementSignDate && values.agreementSignDate !== undefined && values.agreementSignDate !== null) {
          values.agreementSignDate = values['agreementSignDate'].format('YYYY-MM-DD');
        } else {
          values.agreementSignDate = '';
        }
        if (values.effectDate && values.effectDate !== undefined && values.effectDate !== null) {
          values.effectStartDate = values['effectDate'][0].format('YYYY-MM-DD');
          values.effectEndDate = values['effectDate'][1].format('YYYY-MM-DD');
          delete values.effectDate;
        } else {
          values.effectStartDate = '';
          values.effectEndDate = '';
          delete values.effectDate;
        }
        if (values.payDateSd && values.payDateSd !== undefined && values.payDateSd !== null) {
          values.payDate = values['payDateSd'].format('YYYY-MM-DD');
        } else {
          values.payDate = '';
        }
        if (values.contractUrl.fileList) {
          values.contractUrl = values.contractUrl.fileList[0].response.data;
        } else {
          values.contractUrl = this.props.fileUrl;
        }
        values.comContractId = this.state.comContractId;
        api.enterpriseComContractUpdateComContract({ ...values }).then(() => {
          message.success('保存成功！');
          this.props.changeTable();
          this.setState({ open: false, timeLimit: '' });
        }, (err1) => {
          console.log(err1);
        });
      }
    });
  };

  //合同有效期-合同期限
  validDeadlineChange = (date, dateString) => {
    console.log("合同期限变化", date, dateString);

    const startminTime = (new Date(date[0]['_d'])).getTime();
    const endminTime = (new Date(date[1]['_d'])).getTime();

    const currentStartYear = moment(startminTime).format('YYYY');
    const currentEndYear = moment(endminTime).format('YYYY');
    const currentStartMonth = moment(startminTime).format('MM');
    const currentEndMonth = moment(endminTime).format('MM');
    const currentStartDay = moment(startminTime).format('DD');
    const currentEndDay = moment(endminTime).format('DD');

    let year;
    let month;
    let day;
    if (currentEndYear >= currentStartYear) {
      if (currentEndMonth >= currentStartMonth) {
        year = currentEndYear - currentStartYear;
        month = currentEndMonth - currentStartMonth;
        day = currentEndDay - currentStartDay;
      } else {
        year = currentEndYear - currentStartYear - 1;
        if (currentEndDay >= currentStartDay) {
          month = currentEndMonth - currentStartMonth + 12;
          day = currentEndDay - currentStartDay;
        } else {
          month = currentEndMonth - currentStartMonth + 12 - 1;
          day = currentEndDay - currentStartDay + 30;
        }
      }
    }
    console.log("年", year);
    console.log("月", month);
    console.log("日", day);
    console.log("nianyueri", year + '年' + month + '月' + day + '天');
    let timeLimit;
    if (year === 0) {
      if (month === 0) {
        timeLimit = day + '天';
        if (day === 0) {
          timeLimit = '';
        }
      } else {
        timeLimit = month + '月' + day + '天';
      }
    } else {
      timeLimit = year + '年' + month + '月' + day + '天';
    }
    console.log("jutishijian timeLimit", timeLimit);
    this.setState({ timeLimit });
  }

  //报表类型 change
  pSelectChange = (value, type) => {
    console.log(typeof value, type);
    this.setState({ [type]: value });

  };
  changeEditable = () => {
    this.setState({ editable: false });
  };
  //发放/结算方式
  renderDistributionModeList = () => {
    return this.state.distributionModeList.map((val, key) => {
      return <Option key={key} value={val.codeValue + ""}>{val.label}</Option>;
    });
  };

  //校验金额
  checkJinE = (rule, value, callback) => {
    if (value === ' ') {
      callback('输入不能为空！');
    } else if (value && !(/^([1-9][0-9]*|0)(\.[0-9]{1,2})?$/).test(value)) {
      callback('输入不正确！');
    } else {
      callback();
    }
  };

  renderCheckOthers = (sValue) => {
    api.publicCommonFileFilePreview({
      url: sValue
    }).then((data) => {
      if (data.data) {
        this.setState({
          wenUrl: data.data,
        })
      }
    })
  };

  renderCheckOthersMore = (sValue) => {
    api.publicCommonFileFilePreview({
      url: sValue
    }).then((data) => {
      if (data.data) {
        this.setState({
          wenUrlMore: data.data,
        })
      }
    })
  };

  selectView = () => {
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 7
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 20
        },
        md: {
          span: 16
        }
      }
    };
    const { getFieldDecorator } = this.props.form;
    const currentContractType = this.state.contractType;
    if (currentContractType === "01") {
      return (
        <div>
          <FormItem {...formItemLayout} label="联系电话">
            {getFieldDecorator('secondPartyTel', {
              initialValue: this.state.currentRow.secondPartyTel || '',
              rules: [
                {
                  required: false,
                  message: "请输入联系电话"
                }, {
                  pattern: /^((0\d{2,3}-\d{7,8})|(1[0-9]{10}))$/,
                  message: "联系电话格式错误！"
                }
              ]
            })(<Input placeholder={this.state.editable === true ? '' : '请输入'} disabled={this.state.editable} />)}
          </FormItem>
          {/*{this.state.currentRow.effectStartDate ? <FormItem {...formItemLayout} label="合同有效期">*/}
          {/*{getFieldDecorator('effectDate', {*/}
          {/*initialValue: [moment(this.state.currentRow.effectStartDate, dateFormat), moment(this.state.currentRow.effectEndDate, dateFormat)],*/}
          {/*})(<RangePicker disabled={this.state.editable} />)}*/}
          {/*</FormItem> : <FormItem {...formItemLayout} label="合同有效期">*/}
          {/*{getFieldDecorator('effectDate')(<RangePicker disabled={this.state.editable} />)}*/}
          {/*</FormItem>}*/}

          <FormItem {...formItemLayout} label="付费金额">
            {getFieldDecorator('payAmount', {
              initialValue: this.state.currentRow.payAmount || '', rules: [{
                validator: this.checkJinE
              }]
            })(<Input
              placeholder={this.state.editable === true ? '' : '请输入'} disabled={this.state.editable} />)}
          </FormItem>
          {this.state.currentRow.payDate ? <FormItem {...formItemLayout} label="付费日期">
            {getFieldDecorator('payDateSd', {
              initialValue: moment(this.state.currentRow.payDate, dateFormat)
            })(<DatePicker format="YYYY-MM-DD" disabled={this.state.editable} />)}
          </FormItem> : <FormItem {...formItemLayout} label="付费日期">
              {getFieldDecorator('payDateSd', {
              })(<DatePicker format="YYYY-MM-DD" disabled={this.state.editable} />)}
            </FormItem>}

        </div>
      );
    }
    if (currentContractType === "02" || currentContractType === "03") {
      const smallTag = (currentContractType === "02")
        ? (
          <FormItem {...formItemLayout} label="工作岗位">
            {getFieldDecorator('workPost', { initialValue: this.state.currentRow.workPost || '' })(<Input
              placeholder={this.state.editable === true ? '' : "请输入岗位名称"} disabled={this.state.editable} />)}
          </FormItem>)
        : (
          <FormItem {...formItemLayout} label="工作内容">
            {getFieldDecorator('content', { initialValue: this.state.currentRow.content || '' })(<Input
              placeholder={this.state.editable === true ? '' : "请输入岗位及内容"} disabled={this.state.editable} />)}
          </FormItem>);
      return (
        <div>
          <FormItem {...formItemLayout} label="身份证号码">
            {getFieldDecorator('secondPartyIdCardNo', {
              initialValue: this.state.currentRow.secondPartyIdCardNo || '',
              rules: [
                {
                  required: false,
                  message: "请输入身份证号码"
                }, {
                  pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                  message: "证件格式错误"
                }
              ]
            })(
              <Input placeholder={this.state.editable === true ? '' : "请输入"} disabled={this.state.editable} />)}
          </FormItem>
          <FormItem {...formItemLayout} label="联系电话">
            {getFieldDecorator('secondPartyTel', {
              initialValue: this.state.currentRow.secondPartyTel || '',
              rules: [{
                required: false, message: '请输入联系电话',
              }, {
                pattern: /^((0\d{2,3}-\d{7,8})|(1[0-9]{10}))$/,
                message: "联系电话格式错误！"
              }],
            })(<Input placeholder={this.state.editable === true ? '' : "请输入"} disabled={this.state.editable} maxLength="11" />)}
          </FormItem>

          {/*{this.state.currentRow.effectStartDate ? <FormItem {...formItemLayout} label="合同有效期">*/}
          {/*{getFieldDecorator('effectDate', {*/}
          {/*initialValue: [moment(this.state.currentRow.effectStartDate, dateFormat), moment(this.state.currentRow.effectEndDate, dateFormat)],*/}
          {/*})(<RangePicker format={dateFormat} disabled={this.state.editable} />)}*/}
          {/*</FormItem> : <FormItem {...formItemLayout} label="合同有效期">*/}
          {/*{getFieldDecorator('effectDate', {})(<RangePicker format={dateFormat} disabled={this.state.editable} />)}*/}
          {/*</FormItem>}*/}

          <FormItem {...formItemLayout} label="试用期">
            {getFieldDecorator('period', {
              initialValue: this.state.currentRow.period,
              rules: [
                {
                  required: false
                }
              ]
            })(<InputNumber min={1} max={100} style={{ width: '260px' }}
              disabled={this.state.editable} />)}
            <span>月</span>
          </FormItem>
          {smallTag}
          <FormItem {...formItemLayout} label="岗位工资">
            {getFieldDecorator('postSalary', {
              initialValue: this.state.currentRow.postSalary || '',
              rules: [{
                validator: this.checkJinE
              }]
            })(<Input
              style={{ width: 294 }} placeholder={this.state.editable === true ? '' : "请输入"} disabled={this.state.editable} />)}
          </FormItem>
          <FormItem {...formItemLayout} label="试用期工资">
            {getFieldDecorator('periodSalary', {
              initialValue: this.state.currentRow.periodSalary || '',
              rules: [{
                validator: this.checkJinE
              }]
            })(<Input style={{ width: 294 }} placeholder={this.state.editable === true ? '' : "请输入"} disabled={this.state.editable} />)}
          </FormItem>
          <FormItem {...formItemLayout} label="按">
            {getFieldDecorator('distributionMode', { initialValue: this.state.currentRow.distributionMode || '' })(
              <Select style={{ width: '254px', marginRight: '8px' }} disabled={this.state.editable}>
                {this.renderDistributionModeList()}
              </Select>)}
            <span>发放</span>
          </FormItem>
        </div>
      );
    }
    if (currentContractType === "04") {
      return (
        <div>
          <FormItem {...formItemLayout} label="身份证号码">
            {getFieldDecorator('secondPartyIdCardNo', {
              initialValue: this.state.currentRow.content,
              rules: [{
                required: false, message: '请输入证件号码',
              }, {
                pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                message: "证件格式错误"
              }],
            })(<Input placeholder={this.state.editable === true ? '' : '请输入'} maxLength="18" disabled={this.state.editable} />)}
          </FormItem>
          <FormItem {...formItemLayout} label="联系电话">
            {getFieldDecorator('secondPartyTel', {
              initialValue: this.state.currentRow.content,
              rules: [{
                required: false, message: '请输入联系电话',
              }, {
                pattern: /^((0\d{2,3}-\d{7,8})|(1[0-9]{10}))$/,
                message: "联系电话格式错误！"
              }],
            })(<Input placeholder={this.state.editable === true ? '' : "请输入"} disabled={this.state.editable} maxLength="11" />)}
          </FormItem>
          {/*<FormItem {...formItemLayout} label="合同有效期">*/}
          {/*{getFieldDecorator('effectDate', {})(<RangePicker format={dateFormat} disabled={this.state.editable} />)}*/}
          {/*</FormItem>*/}
          {/*{this.state.currentRow.effectStartDate  ? <FormItem {...formItemLayout} label="合同有效期">*/}
          {/*{getFieldDecorator('effectDate', {*/}
          {/*initialValue: [moment(this.state.currentRow.effectStartDate, dateFormat), moment(this.state.currentRow.effectEndDate, dateFormat)],*/}
          {/*})(<RangePicker disabled={this.state.editable} />)}*/}
          {/*</FormItem> : <FormItem {...formItemLayout} label="合同有效期">*/}
          {/*{getFieldDecorator('effectDate')(<RangePicker disabled={this.state.editable} />)}*/}
          {/*</FormItem>}*/}
          <FormItem {...formItemLayout} label="劳务内容">
            {getFieldDecorator('content', {
              initialValue: this.state.currentRow.content
            })(<Input placeholder={this.state.editable === true ? '' : "请输入劳务内容"} maxLength="20" disabled={this.state.editable} />)}
          </FormItem>
          <FormItem {...formItemLayout} label="劳务地点">
            {getFieldDecorator('workPlace', {
              initialValue: this.state.currentRow.content
            })(<Input placeholder={this.state.editable === true ? '' : "请输入劳务地点"} maxLength="50" disabled={this.state.editable} />)}
          </FormItem>
          <FormItem {...formItemLayout} label="劳务费用" className="lao_108">
            {getFieldDecorator('serviceAmount', {
              initialValue: this.state.currentRow.serviceAmount,
              rules: [{
                validator: this.checkJinE
              }]
            })(<Input suffix="元" placeholder={this.state.editable === true ? '' : "请输入"} maxLength="8" disabled={this.state.editable} />)}
          </FormItem>
          <FormItem {...formItemLayout} label="按">
            {getFieldDecorator('distributionMode', { initialValue: this.state.currentRow.distributionMode })
              (<Select disabled={this.state.editable} style={{ width: '255px', marginRight: '8px' }}>
                {this.renderDistributionModeList()}
              </Select>)}
            <span>发放</span>
          </FormItem>
          <FormItem {...formItemLayout} label="劳务总金额" className="lao_108">
            {getFieldDecorator('serviceTotalAmount', {
              initialValue: this.state.currentRow.serviceTotalAmount,
              rules: [{
                validator: this.checkJinE
              }]
            })(<Input suffix="元" placeholder={this.state.editable === true ? '' : "请输入"} maxLength="8" disabled={this.state.editable} />)}
          </FormItem>
        </div>
      );
    }
  };

  render() {
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 7
        }
      },
      wrapperCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 17
        },
        md: {
          span: 17
        }
      }
    };


    const { getFieldDecorator } = this.props.form;
    const editableView = (this.state.editable === true)
      ? (
        <FormItem {...formItemLayout} label="合同文件备份">
          {getFieldDecorator('contractUrl', {
            rules: [
              {
                required: true
              }
            ]
          })(<div>
            <Upload
              fileList={this.state.fileListWed}
              style={{ width: '100%' }}
            >
            </Upload>
            <a href={this.state.wenUrl} target='_blank' style={{ color: '#999' }} id="cha_fu">查看附件</a>
          </div>)
          }
        </FormItem>
      )
      : (
        <FormItem {...formItemLayout} label="合同文件备份">
          {getFieldDecorator('contractUrl', {
            initialValue: this.state.fileListWed,
            rules: [
              {
                required: true
              }
            ]
          })(<div className="popo-url-upload"><Upload
            fileList={this.state.fileListWed}
            {...this.modelUpload}
            style={{ width: '100%' }}
            onRemove={() => { return false; }}
            className="remove-no"
          >
            <Button style={{ marginRight: "8px" }}><Icon type="upload" />替换文件</Button>
            支持:.doc\.docx\.pdf\.jpg\.png
          </Upload>
            <a className="upload-p" href={this.state.wenUrl} target='_blank'>

            </a>
          </div>)
          }
        </FormItem>
      );
    return (
      <Drawer
        noTouchOpen
        overlayColor="rgba(0, 0, 0,0)"
        right
        open={this.state.open}
        noTouchClose
        zIndex={2}
        width={600}
        className="edit-drawer-box drawer-box"
        onChange={(open) => {
          const form = this.props.form;
          if (open === false) {
            form.setFieldsValue({
              secondPartyName: '',
              remark: '', contractUrl: '', secondPartyTel: '', payAmount: '',
              workPost: '', content: '', secondPartyIdCardNo: '', period: '', postSalary: '', periodSalary: '',
              distributionMode: '', workPlace: '', serviceAmount: '', serviceTotalAmount: '',
              // effectDate:null,agreementSignDate:{null},payDateSd:{null},
            }
            );
            if (form.getFieldValue('agreementSignDate')) {
              form.setFieldsValue({ agreementSignDate: null });
            }
            if (form.getFieldValue('payDateSd')) {
              form.setFieldsValue({ payDateSd: null });
            }
            if (form.getFieldValue('effectDate')) {
              form.setFieldsValue({ effectDate: null });
            }
            this.setState({
              fileListWed: [
                {
                  uid: 1,
                  name: '文件',
                  status: 'done',
                  url: this.props.fileListUrl,
                }
              ],
            })
          }
          this.props.onChange(open);
          this.setState({ open });
        }}
      >
        <div className="drawer">
          <div className="drawer-header">
            {(this.state.editable === true) ? <span>续签合同</span> : <span>续签合同</span>}
          </div>
          <div className="drawer-content">
            <Form onSubmit={this.handleEditContractSubmit}>
              <FormItem {...formItemLayout} label="合同类型">
                {getFieldDecorator('contractType', {
                  initialValue: this.state.currentRow.contractType || '',
                  rules: [
                    {
                      required: true, message: '请选择合同类型'
                    }
                  ]
                })(
                  <PSelect style={{ width: 294 }} placeholder="请选择" type="contractType" onChange={this.pSelectChange}
                    disabled />
                )}
              </FormItem>
              <FormItem {...formItemLayout} label="合同名称">
                {getFieldDecorator('contractName', {
                  initialValue: this.state.currentRow.contractName,
                  rules: [
                    {
                      required: true,
                      message: "请输入合同名称"
                    }
                  ]
                })(<Input placeholder="请输入" disabled={this.state.editable} />)}
              </FormItem>
              <FormItem {...formItemLayout} label="企业档案编号">
                {getFieldDecorator('comFileNo', {
                  initialValue: this.state.currentRow.comFileNo || '',
                  rules: [
                    {
                      required: true,
                      message: "请输入企业档案编号"
                    }, {
                      pattern: /[0-9]/,
                      message: "请输入数字"
                    }
                  ]
                })(<Input placeholder="请输入" disabled={this.state.editable} maxLength="30" />)}
              </FormItem>
              <FormItem {...formItemLayout} label="我方为">
                {getFieldDecorator('comParty', {
                  initialValue: this.state.currentRow.comParty || '',
                  rules: [
                    {
                      required: true,
                      message: "请选择甲方/乙方"
                    }
                  ]
                })(
                  <RadioGroup onChange={this.onChangeRadio} disabled={this.state.editable}>
                    <Radio value={'1'}>甲方</Radio>
                    <Radio value={'2'}>乙方</Radio>
                  </RadioGroup>
                )}
              </FormItem>
              <FormItem {...formItemLayout} label="甲方">
                {getFieldDecorator('firstPartyName', { initialValue: this.state.currentRow.firstPartyName })(<Input
                  placeholder="请输入" disabled={this.state.editable} maxLength="30" />)}
              </FormItem>
              <FormItem {...formItemLayout} label="联系电话">
                {getFieldDecorator('firstPartyTel', {
                  initialValue: this.state.currentRow.firstPartyTel,
                  rules: [
                    {
                      required: false,
                      message: "请输入联系电话"
                    }, {
                      pattern: /^((0\d{2,3}-\d{7,8})|(1[0-9]{10}))$/,
                      message: "手机号格式错误！"
                    }
                  ]
                })(<Input
                  placeholder={this.state.editable === true ? '' : "请输入"} disabled={this.state.editable} />)}
              </FormItem>
              <FormItem {...formItemLayout} label="乙方">
                {getFieldDecorator('secondPartyName', { initialValue: this.state.currentRow.secondPartyName })(<Input
                  placeholder={this.state.editable === true ? '' : "请输入"} disabled={this.state.editable} maxLength="30" />)}
              </FormItem>

              {this.state.currentRow.effectStartDate !== '' ?
                <div>
                  <FormItem {...formItemLayout} label="合同有效期">
                    {getFieldDecorator('effectDate', {
                      initialValue: [moment(this.state.currentRow.effectStartDate, dateFormat), moment(this.state.currentRow.effectEndDate, dateFormat)],
                    })(<RangePicker disabled={this.state.editable} />)}
                  </FormItem>
                  <FormItem {...formItemLayout} label="合同期限">
                    {getFieldDecorator('timeLimit', {
                    })(<span>{this.state.currentRow.timeLimit}</span>)}
                  </FormItem>
                </div>
                :
                <div>
                  <FormItem {...formItemLayout} label="合同有效期">
                    {getFieldDecorator('effectDate')(<RangePicker onChange={this.validDeadlineChange} disabled={this.state.editable} />)}
                  </FormItem>
                  <FormItem {...formItemLayout} label="合同期限">
                    {getFieldDecorator('contractDeadline', {
                    })(<span>{this.state.timeLimit}</span>)}
                  </FormItem>
                </div>}
              {this.selectView()}

              {this.state.currentRow.agreementSignDate ? (<FormItem {...formItemLayout} label="协议签订日期">
                {getFieldDecorator('agreementSignDate', {
                  initialValue: moment(this.state.currentRow.agreementSignDate, dateFormat)
                })
                  (<DatePicker disabled={this.state.editable} />)}
              </FormItem>) : (<FormItem {...formItemLayout} label="协议签订日期">
                {getFieldDecorator('agreementSignDate', {
                })(<DatePicker disabled={this.state.editable} />)}
              </FormItem>)}


              <FormItem {...formItemLayout} label="合同备注信息">
                {getFieldDecorator('remark', { initialValue: this.state.currentRow.remark || '' })(<TextArea rows={4}
                  placeholder={this.state.editable === true ? '' : "请输入合同备注信息"}
                  disabled={this.state.editable} />)}
              </FormItem>

              {editableView}
            </Form>
          </div>
          <div className="drawer-footer">
            <Button onClick={
              () => {
                this.props.changeTable();
                // this.setState({ open: false,wenUrl:'' });
                this.setState({ open: false, wenUrl: this.state.wenUrlMore, timeLimit: '' });
              }
            }>返回</Button>
            {this.state.editable ? '' : <Button type="primary" onClick={this.handleEditContractSubmit}>保存</Button>}
          </div>
        </div>
      </Drawer>
    );
  }
}
